<template>
	<view class="orderGoods borRadius14">
		<view class='total'>共购买{{ orderProNum?orderProNum:totalNmu}}件</view>
		<view class='goodWrapper pad30'>
			<block v-for="(item,index) in studentObj" :key="index">
				<view class='item acea-row row-between-wrapper' @click="jumpCon(item.productId)">
					<view class='pictrue'>
						<image :src='item.image'></image>
					</view>
					<view class='text'>
						<view class='acea-row row-between-wrapper'>
							<view class='name line2'>{{item.productName ? item.productName : item.storeName}}</view>
							<view class='num'>{{item.payNum ? item.payNum : item.cartNum}}人</view>
						</view>
						<view class='attr line1' v-if="item.sku">营期：{{item.sku}}</view>
						<view class='evaluate' v-if='item.isReply==0 && evaluate==2' @click.stop="evaluateTap(item)">评价
						</view>
						<view class='evaluate' v-else-if="item.isReply==1">已评价</view>
					</view>
				</view>

				<!-- 学员是和营地走的 买两个营地可以选择两个学员 如果已选择学员，则显示学员信息 -->
				<view class='address acea-row row-between-wrapper' v-if="isCreate == 0">
					<view class="header_item uni-py-6">营期：{{item.sku}} 学生信息</view>
					<view v-if="item.stuList && item.stuList.length>0" style="width: 100%;">
						<view v-for="(student, key) in item.stuList" class="student disp between center" :key="key">
							<view class="left-part disp center">
								<image v-if="student.avatar" :src="student.avatar" class="avatar" />
								<image v-else class="avatar"
									src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/default.png">
								</image>
								<view class="name uni-ml-6">{{student.realName}}</view>
							</view>
							<view class="right_part" v-if="item.idsList.length != (item.payNum|item.cartNum)" @click="remove(key)">移除</view>
							<!-- <view class="right_part"  v-else>班级信息</view> -->
						</view>
					</view>
					<view class="no_students" v-else-if="item.stuList || item.stuList.length < (item.payNum|item.cartNum)" @click="add(index, item)">
						<view>
							<text class="basic-label c0c4">暂无学员信息,请添加学员</text>
							<text class="basic-label greens uni-ml-4">添加</text>
						</view>
					</view>
					<view class="btn_cons" v-if="item.idsList.length != (item.payNum|item.cartNum)">
						<view class="stu_button bg_color" @click="finishCheck(item)">确认选择</view>
					</view>
					<view class='line'>
						<image class="line_img"
							src='https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/line.jpg'></image>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { checkStu } from "@/api/order.js"
	export default {
		props: {
			evaluate: {
				type: Number,
				default: 0,
			},

			//item下面加一个stuList, 对应的学生信息
			cartInfo: {
				type: Array,
				default: function() {
					return [];
				}
			},
			orderId: {
				type: String,
				default: '',
			},
			ids: {
				type: Number,
				default: 0,
			},
			jump: {
				type: Boolean,
				default: false,
			},
			orderProNum: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			productType: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			isCreate: {
				type: Number,
				default: function() {
					return 1;
				}
			},
		},
		data() {
			return {
				studentObj: [],
				idsList: [],
				totalNmu: '',
				isFullIn: false,
				keyIndex: 0
			};
		},
		watch: {
			cartInfo: function(nVal, oVal) {
				let num = 0
				nVal.forEach((item, index) => {
					num += item.cartNum
					if (item.stuIds) {
						item.idsList = item.stuIds.split(",")
					} else{
						item.idsList = [];
						item.stuList = [];
					}
				})
				this.totalNmu = num
				this.studentObj = nVal;
				
			}
		},
		methods: {
			//提交至后台
			finishCheck(item) {
				if (!item.stuList) {
					return this.m_toast("请选择前往营地的学生");
				}
				let stuIds = item.stuList.map(item=>item.stuId);
				if (stuIds.length < 0) {
					return this.m_toast("请选择前往营地的学生");
				}
				checkStu({storeInfoId: item.id, stuIds, orderNo: this.orderId}).then(res=>{
					this.$emit("alertToIndex");
					this.$emit("refreshOrderDetail");
				})
			},
			
			add(key, item) {
				let that = this;
				uni.$on("chooseUser", (res) => {
					uni.$off("chooseUser");
					that.studentObj[key].stuList = res;
				});
				uni.navigateTo({
					url: `/pages/students/select_students/index?num=${item.payNum}`
				})
			},

			evaluateTap(item) {
				uni.navigateTo({
					url: "/pages/users/goods_comment_con/index?unique=" + item.attrId + "&orderId=" + this
						.orderId + '&id=' + this.ids
				})
			},

			jumpCon: function(id) {
				let type = this.productType == 0 ? 'normal' : 'video'
				if (this.jump) {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${id}&type=${type}`
					})
				}
			},



			remove(index) {
				this.studentObj.splice(index, 1);
			},


		}
	}
</script>

<style scoped lang="scss">
	.bg_color {
		background: linear-gradient(105deg, #9fd998, #66bbb1 100%);
	}
	.stu_button {
		color: #fff;
		border: 1rpx solid #ddd;
		width: 158rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		border-radius: 50rpx;
		font-size: 27rpx;
		width: 80%;
		margin: 20rpx 0;
	}
	
	.student {
		width: 100%;
		padding: 10rpx 0;
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
	}

	.orderGoods {
		background-color: #fff;
		margin-top: 15rpx;
		padding: 20rpx 0;
	}

	.no_students {
		background-color: #f9f9f9;
		width: 100%;
		text-align: center;
		line-height: 72rpx;
	}

	.money {
		@include price_color(theme);
	}

	.orderGoods .total {
		width: 100%;
		height: 86rpx;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		box-sizing: border-box;
	}

	.pictrue image {
		background: #f4f4f4;
	}

	.line {
		width: 100%;
		height: 3rpx;
	}

	.line_img {
		width: 100%;
		height: 3rpx;
		display: block;
	}

	.address {
		padding: 12rpx 0;
		box-sizing: border-box;
	}

	.order-submission .address .iconfont {
		font-size: 35rpx;
		color: #707070;
	}

	.order-submission .allAddress {
		width: 100%;
		@include index-gradient(theme);
		padding: 100rpx 30rpx 0 30rpx;
	}

	.order-submission .allAddress .nav {
		width: 690rpx;
		margin: 0 auto;
	}

	.order-submission .allAddress .nav .item {
		width: 334rpx;
	}

	.order-submission .allAddress .nav .item.on {
		position: relative;
		width: 230rpx;
	}

	.order-submission .allAddress .nav .item.on::before {
		position: absolute;
		bottom: 0;
		content: "快递配送";
		font-size: 28rpx;
		display: block;
		height: 0;
		width: 336rpx;
		border-width: 0 20rpx 80rpx 0;
		border-style: none solid solid;
		border-color: transparent transparent #fff;
		z-index: 2;
		border-radius: 14rpx 36rpx 0 0;
		text-align: center;
		line-height: 80rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(2).on::before {
		content: "到店自提";
		border-width: 0 0 80rpx 20rpx;
		border-radius: 36rpx 14rpx 0 0;
	}

	.order-submission .allAddress .nav .item.on2 {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on2::before {
		position: absolute;
		bottom: 0;
		content: "到店自提";
		font-size: 28rpx;
		display: block;
		height: 0;
		width: 401rpx;
		border-width: 0 0 60rpx 60rpx;
		border-style: none solid solid;
		border-color: transparent transparent rgba(255, 255, 255, 0.6);
		border-radius: 36rpx 14rpx 0 0;
		text-align: center;
		line-height: 60rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(1).on2::before {
		content: "快递配送";
		border-width: 0 60rpx 60rpx 0;
		border-radius: 14rpx 36rpx 0 0;
	}


	.order-submission .allAddress .address {
		width: 690rpx;
		max-height: 180rpx;
		margin: 0 auto;
	}

	.order-submission .allAddress .line {
		width: 100%;
		margin: 0 auto;
	}

	.order-submission .wrapper .item .discount .placeholder {
		color: #ccc;
	}

	.order-submission .wrapper {
		background-color: #fff;
		margin-top: 15rpx;
	}
	
	.btn_cons{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	.header_item {
		border-bottom: solid 1px #eee;
		width: 100%;
		padding: 10px 0;
	}
</style>